<template>
    <div class="category-select">
        <el-popover
            style="background:yellow"
            ref="popover"
            placement="bottom-start"
            :width="realWidth"
            trigger="manual"
            v-model="visible"
        >
            <el-input
                v-model="labelValue"
                ref="input"
                :id="id"
                slot="reference"
                :style="{width:width}"
                :placeholder="$t('common.pla.pleaseSelect')"
                @keyup.native="handleChange"
                @blur="handleBlur"
                @click.native="handleClick"
                clearable
                @clear="handleClear"
            ></el-input>
            <el-scrollbar
                tag="ul"
                wrap-class="el-select-dropdown__wrap"
                view-class="el-select-dropdown__list"
                ref="scrollbar"
                @click.native="handleEvent"
                @mousedown.native="handleEvent"
                @mousemove.native="handleEvent"
            >
                <ul
                    class="el-scrollbar__view el-select-dropdown__list list-ul"
                    v-if="categoryItems&&categoryItems.length>0"
                >
                    <template v-for="(item,index) in categoryItems">
                        <div :key="index">
                            <li class="category">
                                {{item.label}}
                                <span
                                    class="fold-btn"
                                    @click="handleFold(item)"
                                    v-if="!item.isShow"
                                >展开</span>
                                <span
                                    class="fold-btn"
                                    @click="handleFold(item)"
                                    v-if="item.isShow"
                                >收起</span>
                            </li>
                            <template v-if="item.isShow">
                                <li
                                    @click="handleSelect(option)"
                                    :class="option.isCurrent?'current':'option'"
                                    :key="'option'+index+index_"
                                    v-for="(option,index_) in item.options"
                                >{{option.label}}</li>
                            </template>
                        </div>
                    </template>
                </ul>
                <div v-else class="no-data-msg">无相关选项</div>
            </el-scrollbar>
        </el-popover>
    </div>
</template>
<script>
export default {
    name: "CategorySelect",
    props: {
        options: {
            default: null
        },
        categorys: {
            default: null
        },
        width: {
            default: "100%"
        },
        popWidth: {
            default: 0
        },
        value: {
            default: null
        }
    },
    data() {
        return {
            id: null,
            visible: false,
            realWidth: 0,
            clearTimeoutId: null,
            categoryItems: null,
            labelValue: null,
            labelValueTmp: null
        };
    },
    created() {
        this.id = "category-select-" + Math.floor(Math.random() * 100000);
    },
    mounted() {
        let input = document.getElementById(this.id);
        if (this.popWidth == 0) {
            if (input && input.offsetWidth) {
                this.realWidth = input.offsetWidth;
            } else {
                this.realWidth = this.width;
            }
        } else {
            this.realWidth = this.popWidth;
        }
        this.getLabelByValue();
    },
    watch: {
        options() {
            this.computeCategories();
            this.getLabelByValue();
        },
        categorys() {
            this.computeCategories();
        },
        value() {
            this.getLabelByValue();
        }
    },
    methods: {
        getLabelByValue() {
            if (this.value != null && this.options) {
                let option = this.options.find(o => o.value == this.value);
                if (option) {
                    this.labelValue = this.labelValueTmp = option.label;
                }
            }
            if (this.value == null) {
                this.labelValue = this.labelValueTmp = null;
            }
        },
        computeCategories(labelValue) {
            if (this.options && this.categorys) {
                let categoryItems = [];
                this.categorys.forEach(c => {
                    let category = {
                        label: c.label,
                        isShow: false
                    };
                    if (labelValue != null && labelValue != "") {
                        category.options = this.options.filter(
                            o =>
                                c.value.includes(o.categoryId) &&
                                o.label.indexOf(labelValue) != -1
                        );
                        if (category.options.length > 0) {
                            category.isShow = true;
                        } else {
                            return;
                        }
                    } else {
                        category.options = this.options.filter(o =>
                            c.value.includes(o.categoryId)
                        );
                    }
                    category.options.forEach(o => {
                        if (o.value == this.value) {
                            o.isCurrent = true;
                        } else {
                            o.isCurrent = false;
                        }
                    });
                    categoryItems.push(category);
                });
                this.categoryItems = categoryItems;
            }
        },
        //处理点击文本框
        handleClick() {
            if (!this.visible) {
                this.visible = true;
                this.computeCategories();
                // this.categoryItems.forEach(c => {
                //     c.isShow = true;
                // });
            }
        },
        //处理失去焦距
        handleBlur() {
            if (this.clearTimeoutId) {
                clearTimeout(this.clearTimeoutId);
            }
            this.clearTimeoutId = setTimeout(() => {
                this.visible = false;
                this.labelValue = this.labelValueTmp;
            }, 200);
        },
        handleSelect(item) {
            this.labelValue = item.label;
            this.labelValueTmp = item.label;
            this.$emit("input", item.value);
            this.$emit("change", item.value);
            this.visible = false;
        },
        //处理文本改变时过滤
        handleChange() {
            this.computeCategories(this.labelValue);
        },
        //捕获事件，取消延迟关闭
        handleEvent(event) {
            this.cancelClearTimeout();
        },
        //处理展开和折叠
        handleFold(item) {
            item.isShow = !item.isShow;
            this.cancelClearTimeout();
        },
        //取消延迟关闭
        cancelClearTimeout() {
            if (this.clearTimeoutId) {
                clearTimeout(this.clearTimeoutId);
                this.clearTimeoutId = null;
            }
            this.$refs.input.focus();
        },
        handleClear() {
            this.labelValue = null;
            this.labelValueTmp = null;
            this.$emit("input", null);
            this.$emit("change", null);
        }
    }
};
</script>
<style lang="scss" scoped>
.list-ul {
    & > div {
        border-bottom: 1px solid #d2d4d6;
    }
    li {
        margin: 0;
        list-style-type: none;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 34px;
        line-height: 34px;
    }
    li.category {
        color: #afafaf;
    }
    li.option {
        cursor: pointer;
        color: #606266;
        text-indent: 20px;
    }
    li.current {
        cursor: pointer;
        color: #3a7fe8;
        text-indent: 20px;
        background: #ebf2ff;
    }
    li.option:hover {
        color: #3a7fe8;
        background: #ebf2ff;
    }
    .fold-btn {
        color: #3a7fe8;
        cursor: pointer;
        margin-left: 15px;
    }
}
.no-data-msg {
    color: #afafaf;
    text-align: center;
}
.el-scrollbar {
    ::v-deep .el-select-dropdown__list {
        padding: 0;
    }
}
</style>